.step-node {
  cursor: pointer;
}
.step-node-wrapper {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    transform: scale(1.05);
  }
  span {
    position: absolute;
    cursor: pointer;
  }
}
.step-start {
  composes: step-node;
  fill: #41a2bf;
  circle {
    stroke: #fafafa;
    stroke-width: 3px;
  }
}

.step-rule {
  composes: step-node;
  fill: #4ab471;
  path {
    stroke-width: 10px;
    stroke: #4ab471;
    &:first-child {
      stroke: #fafafa;
      stroke-width: 15px;
    }
  }
}

.step-action {
  composes: step-node;
  fill: #4a90e2;
  rect {
    stroke: #fafafa;
    stroke-width: 3px;
  }
}

.step-end {
  composes: step-node;
  fill: #d0021b;
  circle {
    stroke: #fafafa;
    stroke-width: 3px;
  }
}

.step-add {
  composes: step-node;
  fill: #fff;
  circle {
    stroke: #a7b8d1;
    stroke-width: 1.5px;
    stroke-dasharray: 4.2, 2;
  }
}
